<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>小米网后台主页-会员信息页面</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
	<!--导入js组件vue的类库-->
<script type="text/javascript"></script>
<script type="application/javascript" src="../js/vue.min.js"></script>

	<script type="text/javascript">
//	$(document).ready(function(){
		//loadUser();
	//})
	//连接servlet 获取 数据
/*	function loadUser(){
		$.ajax({
			url:"getUserList",
			method:"get",
			success:function(data){
				showMsg(data);
			},
			error:function(XMLHttpRequest,textStatus,errorThrown){
				alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
			}
		});
	}*/
	//显示用户信息

	//删除用户

	//条件查询

</script>
</head>
<body>
	
	<div class="row" style="width: 100%;">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading">会员列表</div>
					<div class="panel-body">
					<!-- 条件查询 -->
						<div class="row">
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
								<div class="form-group form-inline">
									<span>用户电话</span>
									<input type="text" name="tel" class="form-control" id="tell">
									<button type="button" class="btn btn-primary" id="search"  ><span class="glyphicon glyphicon-search"></span></button>
								</div>
							</div>
<!--							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
								<div class="form-group form-inline">
									<span>email</span>
									&nbsp;&nbsp;&nbsp;&nbsp;
									<label class="radio-inline">
									  <input type="radio" name="gender" value="男"> 男&nbsp;&nbsp;&nbsp;&nbsp;
									</label>
									<label class="radio-inline">
									  <input type="radio"name="gender" value="女"> 女
									</label>
								</div>
							</div>-->
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">


							</div>
						</div>
				<!-- 列表显示 -->
						<table id="tb_list" class="table table-striped table-hover table-bordered">
						<tr><td>序号</td><td>电话</td><td>Email</td><td>操作</td></tr>
							<!--数据遍历-->
<!--							<tr><td>1</td><td>admain</td><td>123456@qq.com</td><td>禁言|密码找回</td></tr>-->
							<!--使用vue双向绑定机制遍历集合-->
							<tr v-for="us in users"><td>{{us.id}}</td><td>{{us.tel}}</td><td>{{us.email}}</td><td>禁言|密码找回|<button   @click="edit(us.id)">修改</button>| <button @click="del(us.id)">删除</button></td></tr>
						</table>

<!--						<table id="tb" class="table table-striped table-hover table-bordered">
							<tr><td>序号</td><td>电话</td><td>Email</td><td>操作</td></tr>
							&lt;!&ndash;数据遍历&ndash;&gt;
							&lt;!&ndash;<tr><td>1</td><td>admain</td><td>123456@qq.com</td><td>禁言|密码找回</td></tr>&ndash;&gt;
							&lt;!&ndash;使用vue双向绑定机制遍历集合&ndash;&gt;
							<tr v-for="u in userss"><td>{{u.id}}</td><td>{{u.tel}}</td><td>{{u.email}}</td><td>禁言|密码找回</td></tr>
						</table>-->
						<!--修改模态窗体-->
						<div class="modal fade" id="modalModify">
							<div class="modal-dialog" >
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">X</button>
										<h4 class="modal-title">用户信息修改：</h4>
									</div>
									<div class ="modal-body" >
										<div class="input-group">
											<span class="input-group-addon">ID:</span>
											<input class="input-sm" type="text" id="id" placeholder="1" v-model="userInfo.id"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">TEL:</span>
											<input class="input-sm" type="text" id="tel" placeholder="1" v-model="userInfo.tel"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">EMAIL:</span>
											<input class="input-sm" type="text" id="email" placeholder="1" v-model="userInfo.email"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">INVATITION:</span>
											<input class="input-sm" type="text" id="invitation" placeholder="null" v-model="userInfo.invitation"/>
										</div>

									</div>
									<div class = "modal-footer">
										<button type="button" class="btn btn-default" data-dismiss ="modal">取消</button>
										<button type="button" class="btn btn-primary" id="modify">修改</button>
									</div>
								</div>
							</div>
						</div>



						
					</div>
				</div>
			</div>
		</div>
<script>
var info=new Vue({
    el:'#modalModify',
	data:{
    	userInfo:{'id':2,'tel':'12345678901','email':'1233@qq.com','invitation':'xx'}
	}
	 });
	<!--与表格绑定的对象-->
	var userInfos=new Vue({
		el:"#tb_list",//将id为tb_list的html标签于vue绑定
		data:{
			users:[{'id':2,'tel':'12345678901','email':'1233@qq.com'},
				{'id':2,'tel':'12345678901','email':'1233@qq.com'},
				{'id':2,'tel':'12345678901','email':'1233@qq.com'}
				]
		},
		methods:{//对象的行为
			del:function (id) {
				alert("del"+id);
				$.ajax({
					url:'delUserInfo?id='+id,
					type:'delete',
					dataType:'json',
					success:function (res){
                     if(res.statusCode==200){
                     	alert("ok"+res.msg)
						 loadUsers();//重新加载数据
					 }
					}
				})
			},
			edit:function (id){
				alert("edit"+id)
				$.ajax({
					url:'getUserINfoById/'+id,
					type:'get',
					dataType:'json',
					success:function (res){
                     if (res.statusCode==200){
                     	console.log(res.data)
						 info.userInfo=res.data;//将id查询的对象赋予和模态框绑定数据
						 $("#modalModify").modal("show");//显示模态框
					 }
					}
				})
			}

		}






	});
	//修改关闭模块窗体
	$("#modify").click(function (){
		alert("close")
		$.ajax({
			url:'updateUserInfo',
			type:'put',
			data:JSON.stringify(info.userInfo),//将json对象转为json字符串
			contentType:'application/json',
			dataType:'json',
			success:function (res){
				if (res.statusCode==200){
					alert(res.msg);
					$("#modalModify").modal("hide");//关闭模态框
					loadUsers();//重新加载数据
				}
			}
		})

	})
	$(function (){
		loadUsers();
	});
	 /*$(function (){*/
	function loadUsers(){
		 alert("a")
	 	//在页面加载完成时，向后端发出ajax请求
	 	$.ajax({
			url:'getSysUser',//请求路径
			type:'GET',//请求方式
			// data: '',//请求的数据
			dataType:'json',//响应的数据类型
			success:function (res){
				console.log(res)
				userInfos.users=res;
			}
		});
	 }
</script>

<script>

	 $(function () {
         //1.获取b1按钮
         $("#search").click(function () {
             alert("abc")

			 var val = $("#tell").val();
             alert(val)
			 userInfos.users=null;

				 alert("a")
				 //在页面加载完成时，向后端发出ajax请求
				 $.ajax({
					 url:'getfindTel',//请求路径
					 type:'GET',//请求方式
					 data: {'tel':val},//请求的数据
					 dataType:'json',//响应的数据类型
					 success:function (res){
						 console.log(res)

						 //userInfos.users.length=0;
						 userInfos.users=res;
					 }
				 });

         });
     })
</script>
</body>
</html>